<template>
	<div class="chapter">
		<el-empty v-show="!tableData.length" description="暂无数据"></el-empty>
		<div class="chapter-item" v-for="(item, index) in tableData" :key="item.id">
			<h3>{{ ++index }} {{ item.name }}</h3>
			<ul>
				<li v-for="(v, idx) in item.childList" :key="v.id">
					<span class="chapter-name">{{ index }}.{{ ++idx }} {{ v.name }}</span>
					<div class="resource" v-if="v.childList.length">
						<div class="resource-item" v-for="(m, i) in v.childList" :key="m.id">
							<span>{{ index }}.{{ idx }}.{{ ++i }}</span>
							<b>{{ m.type | typeFilter }}：</b>
							<span class="resource-name">{{ m.name }}</span>
							<el-button class="resource-btn" type="primary" size="mini" round plain @click="handleLearn(m, index, idx, i)">开始学习</el-button>
						</div>
					</div>
					<div v-else>
						<span class="no-data">暂无数据</span>
					</div>
				</li>
			</ul>
			<el-divider></el-divider>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			courseId: '',
			tableData: []
		};
	},
	mounted() {
		this.courseId = this.$route.query.id;
		this.getInfo();
	},
	methods: {
		async getInfo() {
			let res = await this.$store.dispatch('queryOpenApiSysCourseChapter', {
				pid: 0,
				courseId: this.courseId
			});
			this.tableData = res.data;
			this.$bus.$emit('sendCourseChapter', this.tableData);
		},
		async handleLearn(row, index, idx, i) {
			//1.判断有没有登录
			let userId = this.$store.getters.userId;
			if (!userId) {
				this.loginTip();
				return;
			}
			//2.判断有没有加入学习
			let joinFlag = await this.checked();
			if (joinFlag) {
				await this.handleJoin(userId);
			}
			//3.跳转
			let sort = index + '.' + idx + '.' + i + row.name;
			this.$router.push({
				name: 'course-home-play',
				query: {
					id: row.courseId,
					cId: row.id,
					sort
				}
			});
		},
		//查询是否已加入学习
		async checked() {
			let res = await this.$store.dispatch('queryOneSysCourseStudent', this.courseId);
			return res.msg == 0;
		},
		//加入学习
		async handleJoin(userId) {
			let obj = {
				studentId: userId,
				auditStatus: '2',
				orderBy: '10',
				courseId: this.courseId,
				courseOriginator: this.courseInfo.createBy
			};
			await this.$store.dispatch('addSysCourseStudent', obj);
		}
	},
	filters: {
		typeFilter(type) {
			switch (type) {
				case '31':
					return '资源';
				case '32':
					return '作业';
				case '33':
					return '实验';
				case '34':
					return '考试';
				default:
					return type;
			}
		}
	}
};
</script>
<style scoped lang="scss">
.chapter {
	.chapter-item {
		h3 {
			color: #1c1f21;
			font-size: 16px;
			font-weight: 700;
			line-height: 24px;
			margin: 10px 0;
		}
		ul {
			li {
				position: relative;
				padding-left: 12px;
				line-height: 48px;
				list-style: none;
				cursor: pointer;

				.chapter-name {
					color: #333;
					font-size: 16px;
					line-height: 48px;
					margin-right: 20px;
				}
				.resource {
					.resource-item {
						padding-left: 20px;
						transition: all 0.3s;
						&:hover {
							background: #eee;
							.resource-btn {
								display: inline-block;
							}
						}
						.resource-icon {
							margin-right: 5px;
						}
						.resource-name {
							color: #666;
							font-size: 14px;
							line-height: 48px;
							margin-right: 20px;
						}
						.resource-btn {
							display: none;
						}
					}
				}
				.no-data {
					color: #999;
					padding-left: 20px;
				}
			}
		}
	}
}
</style>
